<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>个人信息页面</title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div class="container">
      <div class="left-section">
        <h2>赵六</h2>
        <h3>联系方式</h3>
        <p>手机：123-0000-0000</p>
        <p>邮箱：zhaoliu@example.com</p>

        <h3>个人优势</h3>
        <ul>
          <li>快速学习</li>
          <li>团队协作</li>
          <li>代码规范</li>
        </ul>

        <h3>职业步骤</h3>
        <ol>
          <li>掌握HTML</li>
          <li>掌握CSS</li>
          <li>掌握JS</li>
        </ol>

        <h3>个人词条</h3>
        <p><strong>HTML</strong>：超文本标记语言</p>
        <p><strong>CSS</strong>：层叠样式表</p>

        <h3>技能树</h3>
        <ul>
          <li>
            前端
            <ul>
              <li>HTML</li>
              <li>CSS</li>
            </ul>
          </li>
          <li>
            后端
            <ul>
              <li>Node.js</li>
            </ul>
          </li>
        </ul>
      </div>

      <div class="middle-section">
        <h3>教育经历</h3>
        <table>
          <tr>
            <th>时间</th>
            <th>学校</th>
            <th>专业</th>
          </tr>
          <tr>
            <td>2016 - 2020</td>
            <td>北京大学</td>
            <td>计算机</td>
          </tr>
          <tr>
            <td>2020 - 2023</td>
            <td>清华大学</td>
            <td>软件工程</td>
          </tr>
        </table>

        <h3>在线编辑</h3>
        <form>
          <label for="name">姓名：</label>
          <input type="text" id="name" placeholder="your name" /><br /><br />

          <label for="age">年龄：</label>
          <input type="text" id="age" /><br /><br />

          <label for="email">邮箱：</label>
          <input type="text" id="email" /><br /><br />

          <label for="phone">电话：</label>
          <input type="text" id="phone" /><br /><br />

          <label for="homepage">主页：</label>
          <input type="text" id="homepage" /><br /><br />

          <label for="password">密码：</label>
          <input type="password" id="password" /><br /><br />

          <label for="date">日期：</label>
          <input type="date" id="date" /><br /><br />

          <label for="time">时间：</label>
          <input type="time" id="time" /><br /><br />

          <label for="month">月份：</label>
          <input type="month" id="month" /><br /><br />

          <label for="week">周：</label>
          <input type="week" id="week" /><br /><br />

          <label for="datetime-local">本地日期时间：</label>
          <input type="datetime-local" id="datetime-local" /><br /><br />

          <label for="file">文件：</label>
          <input type="file" id="file" /><br /><br />

          <label for="color">颜色：</label>
          <input type="color" id="color" /><br /><br />

          <label for="range">范围0 - 100：</label>
          <input type="range" id="range" min="0" max="100" /><br /><br />
        </form>
      </div>

      <div class="right-section">
        <h3>选择</h3>
        <p>
          性别： <input type="radio" name="gender" value="male" />男
          <input type="radio" name="gender" value="female" />女
        </p>
        <p>
          技能： <input type="checkbox" name="skill" value="html" />HTML
          <input type="checkbox" name="skill" value="css" />CSS
          <input type="checkbox" name="skill" value="js" />JS
        </p>

        <h3>下拉选择</h3>
        <p>
          单选城市：
          <select name="city">
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="guangzhou">广州</option>
          </select>
        </p>
        <p>
          多选城市：
          <select name="cities" multiple>
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="guangzhou">广州</option>
          </select>
        </p>

        <h3>自我介绍</h3>
        <textarea rows="4" cols="20" placeholder="说点什么..."></textarea>

        <h3>操作</h3>
        <input type="submit" value="提交" />
        <input type="reset" value="重置" />
        <button>普通按钮</button><br /><br />

        <p>隐藏域：<input type="hidden" value="hiddenValue" /></p>
        <p>只读：<input type="text" value="不能改" readonly /></p>
        <p>禁用：<input type="text" value="灰色" disabled /></p>

        <h3>自动补全</h3>
        <p>语言：<input type="text" list="languages" /></p>
        <datalist id="languages">
          <option value="JavaScript"></option>
          <option value="Python"></option>
          <option value="Java"></option>
        </datalist>

        <h3>进度/度量</h3>
        <p>加载：<progress value="70" max="100"></progress></p>
        <p>分数：<meter value="80" min="0" max="100"></meter></p>

        <h3>项目细节</h3>
      </div>
    </div>
  </body>
</html>
